<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.o../../../..ml4/strict.dtd">
<html>
<head>
<title>Stacked Column With Defined Series Collection</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
#mychart {
    width:500px;
    height:350px;
}
</style>
<link rel="stylesheet" type="text/css" href="../../../../build/cssfonts/fonts.css">
</head>
<body class="yui3-skin-sam">
<script type="text/javascript" src="../../../../build/yui/yui.js"></script>
<h3>Stacked Column Chart with defined seriesCollection</h3>
<div id="mychart"></div>
<script type="text/javascript">
    YUI({
        defaultGraphicEngine: (window.location.search.match(/[?&]defaultGraphicEngine=([^&]+)/) || [])[1] || 'svg',
		filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw'
    }).use('charts', function (Y)
    {
        var myDataValues = [
            {date:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
            {date:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
            {date:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
            {date:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
            {date:"5/5/2010", miscellaneous:5000, expenses:3300, revenue:2650}
        ],

        axes = {
            values: {
                type: "stacked",
                position: "bottom",
                keys: ["miscellaneous", "expenses", "revenue"]
            }
        },

        seriesCollection = [
            {
                xKey: "date",
                yKey: "miscellaneous",
                type: "stackedcolumn",
                styles: {
                    marker: {
                        width: 8,
                        fill: {
                            color: "#6aa"
                        }
                    }
                }
            },
            {
                xKey: "date",
                yKey: "expenses",
                type: "stackedcolumn",
                styles: {
                    marker: {
                        width: 8,
                        fill: {
                            color: "#000"
                        }
                    }
                }
            },
            {
                xKey: "date",
                yKey: "revenue",
                type: "stackedcolumn",
                styles: {
                    marker: {
                        width: 8,
                        fill: {
                            color: "#9aa"
                        }
                    }
                }
            }
        ],

        mychart = new Y.Chart({
            stacked: true,
            type:"column",
            render:"#mychart",
            categoryKey: "date",
            seriesCollection: seriesCollection,
            dataProvider:myDataValues
        });

    });
</script>
</body>
</html>
